import React, { Component } from 'react';
import { Table } from 'antd';
import { Modal, Button,Input,Form } from 'antd';
import { connect } from 'dva'

const mapStateToProps = (state) => {
  return state.classroom
}
@connect(mapStateToProps)
class ClassManagemeng extends Component {
  
  state = {
    visible: false,
    loading:false,
    value:'123'
  }

  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = (val) => {
    const { dispatch } = this.props
    dispatch({
        type: 'classroom/addmangerroom',
        payload: val
    })
    this.setState({
      visible: false,
    });
  };

  handleChange(e){
    this.setState({
        value : e.target.value
    })
  }

  handleCancel = (e) => {
    this.setState({
      visible: false,
      loading: false
    });
  };
  detel(text){
    console.log(text.room_id)
    const { dispatch } = this.props
    dispatch({
        type: 'classroom/mangerroomdelete',
        payload: text
    })
  }
  
get tableColumns () {
  return [{
    title: '教室号',
    dataIndex: 'room_text',
    key: 'room_id',
    render: text => <a>{text}</a>
  },
  {
    title: '操作',
    dataIndex: 'address',
    key: 'address',
    render: (text, record, index) => {
      return (
        <React.Fragment>
          <a style={{ marginRight: 16 }} onClick={()=>{this.detel(record)}}>删除</a>
        </React.Fragment>
      )
    }
  }]
}
  render() {
    const { visible, loading } = this.state;
    const { mangerroomList } = this.props
    console.log(this.props)
    return (
      <div>
          {/* <Pop /> */}
      <div>教室管理</div>
      <Button type="primary" onClick={this.showModal}> + 添加教室</Button>
        <Modal
          visible={visible}
          title="添加教室"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={[
            <Button key="back" onClick={this.handleCancel}>取消</Button>,
            <Button key="submit" type="primary" loading={loading} onClick={()=>{this.handleOk(this.state.value)}}>提交</Button>,
          ]}
        >
          <Form>
            <Form.Item name={['user', 'name']} label="教室号" rules={[{ required: true }]}>
              <Input  value={this.state.value} onChange={this.handleChange.bind(this)} />
            </Form.Item>
          </Form>
        </Modal>
        <Table columns={this.tableColumns} dataSource={mangerroomList.data} />
      </div>
    );
  }
}

export default ClassManagemeng;